<template>
  <guat-page-layout divide :title="['单个修改', '积分记录']">
    <template #left>
      <div class="flex flex-col gap-4">
        <a-card :bordered="false" title="查找成员">
          <template #actions>
            <guat-button-group
              :buttons="[
                { text: '重置', onClick: () => setSearchFormValue(null) },
                { text: '查找', type: 'primary', onClick: handleSearch },
              ]"
            />
          </template>
          <guat-search-form />
        </a-card>
        <a-card :bordered="false">
          <template #title>
            <div class="text-xl">成员积分信息</div>
          </template>
          <guat-member-info-desc size="large" :column="1" />
        </a-card>
        <div v-if="memberPoints" class="grid grid-cols-3 gap-4">
          <a-card
            v-for="point in memberPoints"
            class="group cursor-pointer hover:bg-primary-light-1 hover:!transition-[background-color]"
            :bordered="false"
          >
            <div class="group-hover:text-primary text-tc-2 text-sm mb-2">
              {{ point[M.PointTypeName] }}
            </div>
            <div class="group-hover:text-primary text-lg font-bold">
              {{ point[M.PointTypeValue] }}分
            </div>
          </a-card>
        </div>
      </div>
    </template>
    <template #right>
      <guat-change-records-table />
    </template>
    <template #actions>
      <guat-button-group
        :buttons="[
          {
            text: '新增修改',
            internal: $config.$button.PLR,
            disabled: !data,
            onClick: handleOpenNewChangeModal,
          },
        ]"
      />
    </template>
  </guat-page-layout>
  <guat-new-change-modal title="新增修改">
    <guat-new-change-form />
  </guat-new-change-modal>
</template>

<script setup lang="ts">
import { GetMemberPointChange } from "@/api/point";
import { createTableColumns } from "./table-config";
import { changePointFormItemConfig, searchFormItemConfig } from "../form-config";
import { memberInfoDesc } from "../desc-config";
import type {
  GetMemberPointChangeRequest as GMPCReq,
  GetMemberPointChangeResponse as GMPCRes,
} from "@/types/api/point";

const [GuatChangeRecordsTable, { setTableData }] = useTable(createTableColumns());
const [GuatNewChangeModal, { setModalVisible }] = useModal();
const [GuatMemberInfoDesc, { setData }] = useDescriptions(memberInfoDesc);
const [GuatNewChangeForm, { setFormValue: setNewChangeFormValue }] =
  useForm(changePointFormItemConfig);
const [GuatSearchForm, { setFormValue: setSearchFormValue }] = useForm(searchFormItemConfig);

const { map: M } = GetMemberPointChange;
const { request: getMemberPointInfo, data } = useAxios<GMPCReq, GMPCRes>(GetMemberPointChange);

const memberPoints = computed(() => data.value?.[M.UserPoints] ?? []);

const handleSearch = async (info: GMPCReq) => {
  await getMemberPointInfo({
    [M.UserNo]: info[M.UserNo],
    [M.UserName]: info[M.UserName],
  });
  setData(unref(data));
  setTableData(data.value![M.UserRecords]);
};

const handleOnClickPoint = (point: any) => {
  const pointTypeRecords = data.value![M.UserRecords].filter(
    (item: any) => item[M.PointType][M.PointTypeId] == point[M.PointTypeId]
  );
  setTableData(pointTypeRecords);
};

const handleOpenNewChangeModal = () => {
  setNewChangeFormValue({
    userNo: data.value?.userNo,
  });
  setModalVisible(true);
};

onMounted(() => {
  handleSearch({
    userNo: "1",
    userName: "",
  });
});
</script>

<style scoped></style>
